<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp"%>
<html>
	<head>
		<meta charset="UTF-8">
		<title>共富网-兑换共富券</title>
		<jsp:include page="/include/wchat/head.jsp"></jsp:include>
		<link type="text/css" rel="stylesheet"
			href="/v2/wchat/resrc/css/account.css">
	</head>
<style>
.invest-tb li{
	width: 100%;
	border-bottom:none;
}
</style>
	<body>
		<div id="header">
			<a href="/wchatIndex.do" class="backto">返回</a>
			<div class="title-sub">
				兑换共富券
			</div>
		</div>
		<div id="wrap">
			<div id="redemptionCodeDiv" class="table invest-tb">
				<div class="link-touch">
				    <ul class="items">
				      <li>
				        <label class="txt">兑换码</label>
				        <input type="text" id="redemptionCode" name="redemptionCode" class="input" maxlength="16" value="${session.paycode }" placeholder="请输入共富券兑换码">
				      </li>
				    </ul>
				    <div id="errorMessagePrompt" class="vtip errs"></div>
				  </div>
				  <div class="operate-button"> <a href="javascript:redeemCode();" class="btn" id="redeemCodeButton">兑换共富券</a> </div>
			</div>
			<div id="redemptionCodeSuccess" class="registSuccess" style="display:none">
				<div class="operate-success">
					<p class="tips-info"
						style="font-size: 14px; font-weight: normal;">
						<b class="icon-success"></b>恭喜您，成功兑换共富券！
					</p>
				</div>
				<div class="itip">
					现在您可以
				</div>
				<div class="operate-button operate-acc">
					<a href="/wchatVoucher.do" class="btn">查看共富券</a>
				</div>
			</div>
		</div>
		<div id="footer">
			<div class="menu">
				<a href="/wchatIndex.do">首页</a>
				<a href="/wchatHelp.do">帮助中心</a>
				<a href="/v2/wchat/appCommon/event/index.jsp">关于我们</a>
				<a href="http://www.gofull.com.cn/index.do">电脑版</a>
			</div>
			<div class="safe">
				<b class="icon-safe"></b>正在为您提供银行级别的安全保障
			</div>
			<div class="copyright">
				&copy; 2014共富网 Gofull.com.cn
			</div>
		</div>
<script type="text/javascript">
var redemptionPrompt = '请输入您获得的兑换码';
var invalidFormatPromptStr = $("#errorMessage").val();
var invalidFormatJSPromptStr = '兑换码格式不正确';
var regx=/^[A-Z]{4}\d{1}[A-Z]{4}/;
   
$(function(){
    //输入兑换码
    //输入兑换码的同时清空错误提示信息
    $("#redemptionCode").focus(function(){
		var redemptionCode = $("#redemptionCode").val();
        var invalidPromot = $("#errorMessagePrompt");
        if(redemptionCode == redemptionPrompt){
            $("#redemptionCode").val('')
        }
        invalidPromot.hide();
    });
    
    //离开兑换码输入框
    $("#redemptionCode").blur(function(){
		var redemptionCode = $("#redemptionCode").val();
		if(redemptionCode == ''){
			$("#redemptionCode").val(redemptionPrompt)
		}else{
			$("#redemptionCode").val($.trim(redemptionCode))
		}
    });
	
});

function redeemCode(){ 
	var redemptionCode = $.trim($("#redemptionCode").val());
    if(redemptionCode == redemptionPrompt || redemptionCode == ""){
        return;
    }
	//判断兑换码的格式
	if(!validateRedemptionCode(redemptionCode)){
		errorRedemptionCodePrompt();
        return;
    }

	var param = {};
    param['paramMap.redemptionCode'] = redemptionCode;
	
	$.ajax({
        url: environment.basePath+"/redeemVoucherCode.do",
		data:param,
		type: "POST",
        dataType: "json",
		beforeSend: function(){
        	$("#redeemCodeButton").attr("href","javascript:;").html("兑换中...");
		},
		success: function(data){
			if(data.status == 1){
				//兑换成功					
				$("#redemptionCodeDiv").hide();
				$("#redemptionCodeSuccess").show();
			} else {//兑换失败
				$("#errorMessagePrompt").html(data.msg);
				$("#errorMessagePrompt").show();
				$("#redeemCodeButton").attr("href","javascript:redeemCode();").html("兑换共富券");
			}
		},
		error: function(data){
			redemptionCode.val('');
			errorRedemptionCodePrompt();
		}
	});
}

//验证兑换码格式
function validateRedemptionCode(redemptionCode){
	return regx.test(redemptionCode);
}


//提示错误的兑换码信息
function errorRedemptionCodePrompt(){
	var invalidPromot = $("#errorMessagePrompt");
    invalidPromot.empty();
    invalidPromot.append(invalidFormatJSPromptStr);
    invalidPromot.show();
}
	
</script>
	</body>
</html>